<template>
  <div class="home-page">
    <div>
      <div></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'home',
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
    userInfo: {
      handler (data) {
        if (!data.checkPassWordInvalid) return
        this.$notifyBox('由于您是初次登录或长期未更换密码，请修改密码')
        this.$modifyPwd(false)
      },
      deep: true
    }
  }
}
</script>

<style lang="less">
.home-page {
  height: calc(100% - 30px) !important;
  & > div {
    width: 100% !important;
    min-height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    margin-bottom: 15px;
    & > div {
      width: 1236px;
      height: 683px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
    }
  }
}
.vc-theme-default {
  .home-page > div > div {
    background-image: url('../../assets/img/welcome1.png');
  }
}
.vc-theme-green {
  .home-page > div > div {
    background-image: url('../../assets/img/welcome2.png');
  }
}
@media only screen and (max-width:1367px) {
  .home-page > div > div {
    width: 905px;
    height: 500px;
  }
}
@media only screen and (min-width:1367px) {
  .home-page > div > div {
    width: 1236px;
    height: 683px;
  }
}
</style>
